<template>
  <div class="news-list">
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in categoryList" :key="index" :label="item.name" :name="item.type"></el-tab-pane>
      </el-tabs>
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 10px;
      "
    >
      <div style="display: flex; align-items: center">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="证书名称">
            <el-input
              clearable
              size="small"
              v-model="formInline.name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="状态">
            <el-select
              clearable
              size="small"
              v-model="formInline.state"
              placeholder="请选择"
            >
              <el-option
                v-for="item in [
                  {
                    value: '1',
                    label: '启用',
                  },
                  {
                    value: '0',
                    label: '禁用',
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
            <el-button size="small" @click="resetSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button size="small" type="primary" @click="add">新建证书</el-button>
      </div>
    </div>

    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      empty-text="暂无数据"
    >
      <el-table-column label="证书名称" width="200">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="证书模版" width="150">
        <template slot-scope="scope">
          <img
            :src="scope.row.certTemplate"
            style="width: 120px"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="证书级别" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.level }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有效期限" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.expireYear}}年</span>
        </template>
      </el-table-column>
      <el-table-column label="证书简介" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.intro}}</span>
        </template>
      </el-table-column>
      <el-table-column label="证书获取条件" width="520">
        <template slot-scope="scope">
          <div style="color:#67c23a" v-if="scope.row.onlineRefPaperCode">
            <div>线上考试</div>
            <div>试卷名称：{{scope.row.onlineTestName}}</div>
            <div>及格分数：{{scope.row.onlinePassScore}}</div>
          </div>
          <div style="height:2px;background:#999;margin:10px 0;" v-if="scope.row.onlineRefPaperCode && scope.row.offlineRefPaperCode"></div>
          <div style="color:#409eff" v-if="scope.row.offlineRefPaperCode">
            <div>线下考试</div>
            <div>试卷名称：{{scope.row.offlineTestName}}</div>
            <div>及格分数：{{scope.row.offlinePassScore}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="证书发放条件" width="150">
        <template slot-scope="scope">
          <el-link v-if="scope.row.grantType == 1" type="primary">系统发放</el-link>
          <el-link v-else :underline="false" type="warning">人工发放</el-link>
        </template>
      </el-table-column>
      <el-table-column label="案例上传" width="200">
        <template slot-scope="scope">
          <a v-if="scope.row.caseUrl" :href="scope.row.caseUrl" target="_blank">{{scope.row.caseUrl}}</a>
          <div v-else>否</div>
        </template>
      </el-table-column>
      <el-table-column label="激活费用" width="150">
        <template slot-scope="scope">
          {{scope.row.activateFee}}
        </template>
      </el-table-column>
      <el-table-column label="激活证书积分抵扣比例" width="180">
        <template slot-scope="scope">
          {{scope.row.scoreRate}}
        </template>
      </el-table-column>
      <el-table-column label="制作邮寄费用" width="150">
        <template slot-scope="scope">
          {{scope.row.makeFee}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="350">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button @click="openApply(scope.row)" type="text">证书申请列表</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button @click="openCertPerson(scope.row)" type="text">发放证书</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button @click="openCertLogsit(0, scope.row)" type="text">电子证书申请</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button @click="openCertLogsit(1, scope.row)" type="text">纸质证书申请</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            @onConfirm="del(scope.row)"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="是否删除本条数据？"
          >
            <el-button slot="reference" type="text" style="color: #ff0000"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0 0 0; text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageObj.pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="pageObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageObj.total"
      >
      </el-pagination>
    </div>

    <el-drawer
      v-loading="loading1 || loading2 || loading3 || loading4 || loading5"
      title="证书设置"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="60%"
      :before-close="handleClose">
      <div style="padding: 0 40px;height: 100%;position: relative;">
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">证书名称：</div>
          <div style="flex: 1">
            <el-input clearable v-model="certObj.name" placeholder="请输入"></el-input>
          </div>
        </div>
        <div style="display:flex;margin-bottom: 20px;">
          <div style="width: 100px;">证书模版：</div>
          <div style="flex: 1">
            <el-upload
              :class="imgFilesList.length?'hiddenUpload':''"
              action="https://service.bairicun.com/file/upload"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :file-list="imgFilesList"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">用户标签：</div>
          <div style="flex: 1">
            <el-select style="width:100%;" @change="tagChange" v-model="certObj.tagId" placeholder="请选择">
              <el-option
                v-for="item in tagList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">视频权益：</div>
          <div style="flex: 1">
            <el-select style="width:100%;" @change="videoChange" multiple v-model="certObj.video" placeholder="请选择">
              <el-option
                v-for="item in videoList"
                :key="item.id"
                :label="item.goods_name"
                :value="item.resource_id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">图文权益：</div>
          <div style="flex: 1">
            <el-select style="width:100%;" @change="pictureChange" multiple v-model="certObj.picture" placeholder="请选择">
              <el-option
                v-for="item in pictrueList"
                :key="item.id"
                :label="item.goods_name"
                :value="item.resource_id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">直播权益：</div>
          <div style="flex: 1">
            <el-select style="width:100%;" @change="onlineChangeMore" multiple v-model="certObj.online" placeholder="请选择">
              <el-option
                v-for="item in onlineList"
                :key="item.id"
                :label="item.goods_name"
                :value="item.resource_id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">训练权益：</div>
          <div style="flex: 1">
            <el-select style="width:100%;" @change="testChange" multiple v-model="certObj.test" placeholder="请选择">
              <el-option
                v-for="item in testList"
                :key="item.id"
                :label="item.goods_name"
                :value="item.resource_id">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;font-size: 14px;">训练Pro权益：</div>
          <div style="flex: 1">
            <el-select style="width:100%;" @change="testProChange" multiple v-model="certObj.testPro" placeholder="请选择">
              <el-option
                v-for="item in testProList"
                :key="item.id"
                :label="item.goods_name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div> -->
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">专栏权益：</div>
          <div style="flex: 1">
            <el-select style="width:100%;" @change="zhuanlanChange" multiple v-model="certObj.zhuanlan" placeholder="请选择">
              <el-option
                v-for="item in zhuanLanList"
                :key="item.id"
                :label="item.goods_name"
                :value="item.resource_id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">证书等级：</div>
          <div style="flex: 1">
            <el-input clearable v-model="certObj.level" placeholder="请输入"></el-input>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">有效期限：</div>
          <div style="flex: 1">
            <el-input style="width:200px;" clearable v-model="certObj.expireYear" placeholder="请输入"></el-input>
            <span style="margin-left:20px;">年</span>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">激活费用：</div>
          <div style="flex: 1">
            <el-input style="width:200px;" clearable v-model="certObj.activateFee" placeholder="请输入"></el-input>
            <span style="margin-left:20px;">元</span>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">积分抵扣：</div>
          <div style="flex: 1">
            <el-input style="width:200px;" clearable v-model="certObj.scoreRate" placeholder="请输入"></el-input>
            <span style="margin-left:20px;">元/1积分</span>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">到期续费：</div>
          <div style="flex: 1">
            <el-input style="width:200px;" clearable v-model="certObj.fee" placeholder="请输入"></el-input>
            <span style="margin-left:20px;">元</span>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;">制作费用：</div>
          <div style="flex: 1">
            <el-input style="width:200px;" clearable v-model="certObj.makeFee" placeholder="请输入"></el-input>
            <span style="margin-left:20px;">元</span>
          </div>
        </div>
        <div style="display:flex;margin-bottom: 20px;">
          <div style="width: 100px;">证书简介：</div>
          <div style="flex: 1">
            <el-input type="textarea" :rows="4" clearable v-model="certObj.intro" placeholder="请输入"></el-input>
          </div>
        </div>
        <div style="display:flex;margin-bottom: 20px;">
          <div style="width: 100px;">获取条件：</div>
          <div style="flex: 1">
            <div>
              <div style="margin-bottom:20px;">
                <el-checkbox v-model="onlineChecked">线上考试</el-checkbox>
                <el-checkbox v-model="outlineChecked">线下考试</el-checkbox>
              </div>
              <div v-if="onlineChecked" style="margin-bottom:20px;">
                <el-card :body-style="{padding:'10px 0'}" size="small" class="box-card">
                  <div style="font-weight:bold;border-bottom:1px solid #ccc;padding: 10px 10px;margin-bottom: 10px;">
                    线上考试
                  </div>
                  <div style="display:flex;align-items:center;padding:0 10px;margin-bottom: 10px;">
                    <div style="width:80px;">选择试卷</div>
                    <div style="flex: 1;">
                      <el-select
                        @change="onlineChange"
                        clearable
                        size="small"
                        v-model="certObj.onlineRefPaperCode"
                        placeholder="请选择"
                        style="width:100%;"
                      >
                      <el-option
                          v-for="item in examList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div style="display:flex;align-items:center;padding:0 10px;margin-bottom: 10px;">
                    <div style="width:80px;">及格分数</div>
                    <div style="flex: 1;">
                      <el-input style="width:100%;" size="small" clearable v-model="certObj.onlinePassScore" placeholder="请输入"></el-input>
                    </div>
                  </div>
                  <el-radio-group v-model="certObj.onlineExamType" style="margin-bottom: 10px;margin-left: 20px;">
                    <el-radio :label="0">H5考试</el-radio>
                    <el-radio :label="1">小程序考试</el-radio>
                  </el-radio-group>
                  <div v-if="certObj.onlineExamType == 0" style="display:flex;align-items:center;padding:0 10px;margin-bottom: 10px;">
                    <div style="width:80px;font-size:14px;">H5考试地址</div>
                    <div style="flex: 1;">
                      <el-input style="width:100%;" size="small" clearable v-model="certObj.onlineH5Url" placeholder="请输入"></el-input>
                    </div>
                  </div>
                  <div v-if="certObj.onlineExamType == 1" style="display:flex;padding:0 10px;">
                    <div style="width:80px;font-size:14px;">小程序图片</div>
                    <div style="flex: 1;">
                      <el-input style="width:100%;" size="small" clearable v-model="certObj.onlineWechatPic" placeholder="请输入"></el-input>
                      <!-- <el-upload
                        action="https://service-dev.visualbook.cn/file/uploadOther"
                        :on-success="handleOnlineWechatSuccess"
                        :before-upload="beforeUploadOnlineWechat"
                        :file-list="wechatOnlineFileList"
                        :limit="3"
                        :on-remove="handleRemoveOnlineWechat">
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload> -->
                    </div>
                  </div>
                </el-card>
              </div>
              <div v-if="outlineChecked" style="margin-bottom:10px;">
                <el-card :body-style="{padding:'10px 0'}" size="small" class="box-card">
                  <div style="font-weight:bold;border-bottom:1px solid #ccc;padding: 10px 10px;margin-bottom: 10px;">
                    线下考试
                  </div>
                  <div style="display:flex;align-items:center;padding:0 10px;margin-bottom: 20px;;">
                    <div style="width:80px;">选择试卷</div>
                    <div style="flex: 1;">
                      <el-select
                        @change="offlineChange"
                        clearable
                        size="small"
                        v-model="certObj.offlineRefPaperCode"
                        placeholder="请选择"
                        style="width:100%;"
                      >
                        <el-option
                          v-for="item in examList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div style="display:flex;align-items:center;padding:0 10px;margin-bottom: 10px;">
                    <div style="width:80px;">及格分数</div>
                    <div style="flex: 1;">
                      <el-input style="width:100%;" size="small" clearable v-model="certObj.offlinePassScore" placeholder="请输入"></el-input>
                    </div>
                  </div>
                  <el-radio-group v-model="certObj.offlineExamType" style="margin-bottom: 10px;margin-left: 20px;">
                    <el-radio :label="0">H5考试</el-radio>
                    <el-radio :label="1">小程序考试</el-radio>
                  </el-radio-group>
                  <div v-if="certObj.offlineExamType == 0" style="display:flex;align-items:center;padding:0 10px;margin-bottom: 10px;">
                    <div style="width:80px;font-size:14px;">H5考试地址</div>
                    <div style="flex: 1;">
                      <el-input style="width:100%;" size="small" clearable v-model="certObj.offlineH5Url" placeholder="请输入"></el-input>
                    </div>
                  </div>
                  <div v-if="certObj.offlineExamType == 1" style="display:flex;padding:0 10px;">
                    <div style="width:80px;font-size:14px;">小程序图片</div>
                    <div style="flex: 1;">
                      <el-input style="width:100%;" size="small" clearable v-model="certObj.offlineWechatPic" placeholder="请输入"></el-input>
                      <!-- <el-upload
                        action="https://service-dev.visualbook.cn/file/uploadOther"
                        :on-success="handleWechatSuccess"
                        :before-upload="beforeUploadWechat"
                        :file-list="wechatFileList"
                        :limit="1"
                        :on-remove="handleRemoveWechat">
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload> -->
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 40px;">
          <div style="width: 100px;">发放条件：</div>
          <div style="flex: 1">
            <el-radio-group  :disabled="certObj.haveCase == 1" v-model="certObj.grantType">
              <el-radio :label="1">系统发放</el-radio>
              <el-radio :label="2">人工发放</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div style="display:flex;margin-bottom: 40px;">
          <div style="width: 100px;">案例材料：</div>
          <div style="flex: 1">
            <el-radio-group style="margin-bottom:10px;" @change="haveCaseChange" v-model="certObj.haveCase">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
            <div v-if="certObj.haveCase == 1">
              <el-upload
                action="https://service.bairicun.com/file/uploadOther"
                :on-success="handleCaseSuccess"
                :before-upload="beforeUploadCase"
                :file-list="caseFileList"
                :limit="3"
                :on-remove="handleRemoveCase">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom: 20px;">
          <div style="width: 100px;font-size: 14px;">案例提交地址：</div>
          <div style="flex: 1">
            <el-input clearable v-model="certObj.caseUploadUrl" placeholder="请输入"></el-input>
          </div>
        </div>
        <div style="display:flex;align-items:center;justify-content: flex-end;">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button @click="updateCert" v-if="certObj.id" type="primary">修 改</el-button>
          <el-button @click="createCert" v-else type="primary">添 加</el-button>
        </div>
        <div style="height:20px;"></div>
      </div>
    </el-drawer>

    <el-drawer title="证书申请列表" :visible.sync="applyModal" direction="rtl" size="70%">
      <div style="margin-bottom:20px;">
        <el-select
          size="small"
          clearable
          style="margin:0 10px 0 30px;"
          v-model="applyObj.applyState"
          placeholder="请选择审核状态"
        >
          <el-option
            v-for="item in [{
              value: '0',
              label: '待审核'
            },{
              value: '1',
              label: '已通过'
            },{
              value: '2',
              label: '已拒绝'
            }]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input v-model="applyObj.mobile" autocomplete="off" placeholder="请输入手机号" size="small" style="width: 200px;;margin-right:20px;"></el-input>
        <el-button @click="getApplyList" size="small" type="primary">查询</el-button>
        <el-button @click="resetApply" size="small" type="primary">重置</el-button>
      </div>
      <div style="padding: 0 30px;">
        <el-table
          ref="multipleTable"
          v-loading="applyLoading"
          :data="applyList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          empty-text="暂无数据"
          max-height="500"
        >
          <el-table-column label="证书名称" width="200">
            <template
              slot-scope="scope"
            >{{ scope.row.certificateDetail && scope.row.certificateDetail.name }}</template>
          </el-table-column>
          <el-table-column label="申请附件" width="330">
            <template slot-scope="scope">
              <img
                @click="viewImage(item)"
                v-for="(item, index) in scope.row.pictureKVList"
                :key="index"
                :src="item.url"
                style="width:90px;height:90px;margin-right:10px;"
                alt
              />
            </template>
          </el-table-column>
          <el-table-column label="申请用户昵称" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.nickname }}</template>
          </el-table-column>
          <el-table-column label="申请用户真实姓名" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.realName }}</template>
          </el-table-column>
          <el-table-column label="申请用户姓名拼音" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.pinyinName }}</template>
          </el-table-column>
          <el-table-column label="申请用户手机号" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.mobile }}</template>
          </el-table-column>
          <el-table-column label="申请用户邮箱" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.email }}</template>
          </el-table-column>
          <el-table-column label="申请用户地址" width="200">
            <template slot-scope="scope">{{ scope.row.email }}</template>
          </el-table-column>
          <el-table-column label="申请时间" width="200">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="申请状态" width="100">
            <template slot-scope="scope">
              <el-tag
                style="cursor:pointer;"
                size="small"
                v-if="scope.row.applyState == 0"
                type="info"
              >待审核</el-tag>
              <el-tag
                style="cursor:pointer;"
                size="small"
                v-else-if="scope.row.applyState == 1"
                type="success"
              >已通过</el-tag>
              <el-tag style="cursor:pointer;" size="small" v-else type="danger">已拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="申请备注" width="200">
            <template slot-scope="scope">{{ scope.row.memo }}</template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="审核备注" width="200">
            <template slot-scope="scope">{{ scope.row.reason }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="openApplyResult(scope.row)" type="text">审批</el-button>
              <el-divider direction="vertical"></el-divider>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin:10px 0 0 0;text-align:right;">
          <el-pagination
            @size-change="handleSizeApplyChange"
            @current-change="handleCurrentApplyChange"
            :current-page="applyObj.pageNum"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="applyObj.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="applyObj.total"
          ></el-pagination>
        </div>
      </div>
    </el-drawer>

    <el-dialog destroy-on-close title="发放证书" top="5vh" width="80%" :visible.sync="certPersonModal">
      <div>
        <div style="margin-bottom:20px;display:flex;align-items:center;">
          <div>真实姓名：</div>
          <el-input clearable size="small" style="width:200px;" v-model="certSearchObj.realName" placeholder="真实姓名"></el-input>
          <div style="margin-left:20px;">手机号：</div>
          <el-input clearable size="small" style="width:200px;"  v-model="certSearchObj.mobile" placeholder="手机号"></el-input>
          <el-button style="margin-left:20px;" @click="getCertPersonList" size="small" type="primary">查询</el-button>
          <el-button @click="resetCertPersonList" size="small" type="primary">重置</el-button>
        </div>
        <el-table
          ref="multipleTablePerson"
          v-loading="certPersonLoading"
          :data="certPersonList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          empty-text="暂无数据"
          row-key="id"
          @select-all="selectAll"
          @select="handleSelectionChange"
        >
          <el-table-column reserve-selection type="selection" width="55"></el-table-column>
          <!-- <el-table-column label="证书名称" width="200">
            <template slot-scope="scope">
              <div v-if="certPersonObjXXX.level == 1">IAOA基础</div>
              <div v-if="certPersonObjXXX.level == 2">IAOA提高</div>
              <div v-if="certPersonObjXXX.level == 3">SIAOA</div>
              <div v-if="certPersonObjXXX.level == 4">FIAOMC</div>
            </template>
          </el-table-column> -->
          <el-table-column label="用户昵称" width="150">
            <template slot-scope="scope">{{ scope.row.nickname }}</template>
          </el-table-column>
          <el-table-column label="真实姓名" width="150">
            <template slot-scope="scope">{{ scope.row.realName }}</template>
          </el-table-column>
          <el-table-column label="姓名拼音" width="150">
            <template slot-scope="scope">
              {{ scope.row.pinyinName }}
            </template>
          </el-table-column>
          <el-table-column label="用户手机号" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail && scope.row.userDetail.mobile }}</template>
          </el-table-column>
          <el-table-column label="线上考试成绩" width="150">
            <template slot-scope="scope">{{ scope.row.onlineScore || 0 }}</template>
          </el-table-column>
          <el-table-column label="线下考试成绩" width="150">
            <template slot-scope="scope">{{ scope.row.offlineScore || 0 }}</template>
          </el-table-column>
          <el-table-column label="头像">
            <template slot-scope="scope">
              <img
                style="width:40px;height:40px;"
                :src="scope.row.avatar?scope.row.avatar:'/images/avatar.png'"
                alt
              />
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="120">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="性别" width="100">
            <template slot-scope="scope">{{ scope.row.gender==1?'男':'女' }}</template>
          </el-table-column>
          <el-table-column label="生日" width="100">
            <template slot-scope="scope">{{ scope.row.birthday }}</template>
          </el-table-column>
          <el-table-column label="公司" width="100">
            <template slot-scope="scope">{{ scope.row.company }}</template>
          </el-table-column>
          <el-table-column label="职称" width="100">
            <template slot-scope="scope">{{ scope.row.jobTitle }}</template>
          </el-table-column>
          <el-table-column label="邮箱" width="100">
            <template slot-scope="scope">{{ scope.row.email }}</template>
          </el-table-column>
          <!-- <el-table-column label="会员等级" width="200">
            <template slot-scope="scope">{{ scope.row.level==0?'非会员':`${scope.row.level}级` }}</template>
          </el-table-column>
          <el-table-column label="用户积分" width="200">
            <template slot-scope="scope">
              <div style="display:flex;align-items:center;">
                <div style="color:#66b1ff;">{{ scope.row.score }}</div>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="openViewCert(scope.row)"
                type="text"
              >生成证书</el-button>
              <el-button
                @click="openViewCertInfo(scope.row)"
                type="text"
              >证书信息</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin:10px 0 0 0;text-align:right;">
          <el-pagination
            @size-change="handleSizeCertChange"
            @current-change="handleCurrentCertChange"
            :current-page="certPersonObj.pageNum"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="certPersonObj.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="certPersonObj.total"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="certPersonModal = false">取 消</el-button>
        <el-button type="primary" @click="savePersonCert">确 定</el-button>
      </div>
    </el-dialog>

    <el-drawer
      :title="certLogisticsTitle"
      :visible.sync="certLogisticsModal"
      direction="rtl"
      size="70%"
    >
      <div style="margin-bottom:20px;">
        <!-- <el-select
          size="small"
          clearable
          style="margin:0 10px 0 30px;"
          v-model="certLogisticsSearchObj.logisticsState"
          placeholder="请选择发放状态"
        >
          <el-option
            v-for="item in [{
              value: '0',
              label: '未发送'
            },{
              value: '1',
              label: '已经发'
            }]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          v-if="certLogisticsType == 1"
          size="small"
          clearable
          style="margin:0 10px 0 30px;"
          v-model="certLogisticsSearchObj.payState"
          placeholder="请选择支付状态"
        >
          <el-option
            v-for="item in [{
              value: '0',
              label: '未支付'
            },{
              value: '1',
              label: '已支付'
            }]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->
        <el-input
            style="width:230px;margin:0 10px 0 30px;"
            v-model="certLogisticsSearchObj.mobile"
            autocomplete="off"
            placeholder="请输入手机号"
            size="small"
            clearable
          ></el-input>
        <el-button @click="getCertLogisticsList" size="small" type="primary">查询</el-button>
        <!-- <el-button @click="resetCertLogisticsList" size="small" type="primary">重置</el-button> -->
      </div>
      <div style="padding: 0 30px;">
        <el-table
          ref="multipleTable"
          v-loading="certLogisticsLoading"
          :data="certLogisticsList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          empty-text="暂无数据"
          max-height="500px"
        >
          <el-table-column label="证书名称" width="200">
            <template
              slot-scope="scope"
            >{{ scope.row.certificateDetail && scope.row.certificateDetail.name }}</template>
          </el-table-column>
          <el-table-column label="证书类型" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 0">电子证书</div>
              <div v-else>纸质证书</div>
            </template>
          </el-table-column>
          <el-table-column label="用户昵称" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.nickname }}</template>
          </el-table-column>
          <el-table-column label="手机号" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.mobile }}</template>
          </el-table-column>
          <el-table-column label="真实姓名" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.realName }}</template>
          </el-table-column>
          <el-table-column label="拼音姓名" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.pinyinName }}</template>
          </el-table-column>
          <el-table-column label="联系方式" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 0">{{ scope.row.userDetail.email }}</div>
              <div v-else>{{ scope.row.addressDetail.province }}{{ scope.row.addressDetail.city }}{{ scope.row.addressDetail.district }}{{ scope.row.addressDetail.detail }}</div>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" width="200">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="申请状态" width="100">
            <template slot-scope="scope">
              <el-tag
                style="cursor:pointer;"
                size="small"
                v-if="scope.row.logisticsState == 0"
                type="info"
              >未发放</el-tag>
              <el-tag
                style="cursor:pointer;"
                size="small"
                v-else-if="scope.row.logisticsState == 1"
                type="success"
              >已发放</el-tag>
              <el-tag style="cursor:pointer;" size="small" v-else type="danger">已拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="openCertModal(scope.row)" type="text">审批</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin:10px 0 0 0;text-align:right;">
          <el-pagination
            @size-change="handleSizeSupplyChange"
            @current-change="handleCurrentSupplyChange"
            :current-page="certLogisticsSearchObj.pageNum"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="certLogisticsSearchObj.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="certLogisticsSearchObj.total"
          ></el-pagination>
        </div>
      </div>
    </el-drawer>

    <el-dialog :visible.sync="dialogVisible">
      <img v-if="imgFilesList[0] && imgFilesList[0].url" width="100%" :src="imgFilesList[0].url" alt="">
    </el-dialog>

    <el-dialog title="审核" :visible.sync="applyResultModal">
      <el-form>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="审核结果">
          <el-radio-group v-model="applyResult">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          style="margin-bottom:20px"
          label-width="100px"
          label="审核备注"
          :required="applyResult == 2"
        >
          <el-input
            type="textarea"
            v-model="applyResultReject"
            :rows="4"
            :maxlength="400"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="applyResultModal = false">取 消</el-button>
        <el-button type="primary" @click="saveApplyResult">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看图片" width="70%" :visible.sync="imgModal">
      <div>
        <img :src="imgSrc" style="width:100%;" alt />
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button @click="imgModal = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  deleteApi,
  gettypeListApi,
  changeStateApi,
  changeTopApi,
} from "@/api/news"

import {
  getApplyListApi,
  saveCertPersonApi,
  getCertPersonListApi,
  applyResultApi,
  getCertLogisticsListApi
} from '@/api/cert'

import { getUserListApi } from "@/api/user"

import {
  getCertCategoryListApi,
  getThreeExamListApi,
  getCertListApi,
  createCertApi,
  deleteCertApi,
  updateCertApi,
  queryAllTagListApi,
  getThreeGoodsListApi
} from '@/api/certseries'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      imgModal: false,
      imgSrc: '',
      list: [],
      listLoading: true,
      currentPage: 1,
      formInline: {
        name: ''
      },
      pageObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      typeList: [],
      activeName: '',
      drawerVisible: false,
      imgFilesList: [],
      dialogVisible: false,
      certObj: {
        id: '',
        name: '',
        expireYear: 1,
        level: '',
        activateFee: 0,
        fee: 0,
        makeFee: 0,
        grantType: 1,
        haveCase: 0,
        intro: '',
        offlineWechatPic: '',
        offlineRefPaperCode: '',
        onlineRefPaperCode: '',
        onlineWechatPic: '',
        offlinePassScore: 0,
        onlinePassScore: 0,
        scoreRate: 0,
        state: 1,
        offlineExamType: 0,
        offlineH5Url: '',
        onlineExamType: 0,
        onlineH5Url: '',
        tagId: '',
        tagName: '',
        video: [],
        picture: [],
        zhuanlan: [],
        online: [],
        test: [],
        testPro: [],
        caseUploadUrl: ''
      },
      onlineChecked: false,
      outlineChecked: false,
      categoryList: [],
      activeCertClassifyObj: {},
      activeCertClassifyId: '',
      caseFileList: [],
      examList: [],
      caseFileName: '',
      applySearchId: '',
      applyModal: false,
      applyObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        applyState: '',
        mobile: ''
      },
      applyList: [],
      applyLoading: false,
      certPersonModal: false,
      certPersonId: '',
      certPersonLoading: false,
      certPersonList: [],
      certPersonObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      selectPersonList: [],
      certPersonObjXXX: {},
      certSearchObj: {
        mobile: '',
        name: ''
      },
      certLogisticsTitle: '',
      certLogisticsType: 0,
      certLogisticsObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      certLogisticsModal: false,
      certLogisticsSearchObj: {
        type: '',
        payState: '',
        logisticsState: '',
        mobile: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      certLogisticsCertificateId: '',
      certLogisticsList: [],
      certLogisticsLoading: false,
      wechatFileList: [],
      wechatFileName: '',
      wechatOnlineFileList: [],
      wechatOnlineFileName: '',
      applyResult: '1',
      applyResultModal: false,
      applyResultId: '',
      applyResultReject: '',
      tagList: [],
      videoList: [],
      videoChoosedList: [],
      onlineList: [],
      onlineChoosedList: [],
      testProList: [],
      testProChoosedList: [],
      testList: [],
      testChoosedList: [],
      zhuanLanList: [],
      zhuanlanChoosedList: [],
      pictrueList: [],
      pictrueChooseList: [],
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false
    }
  },
  created() {
    this.getCertCategoryList()
    this.getExam()
    // this.fetchData()
    this.getTypeList()
  },
  methods: {
    tagChange(e) {
      let xx = 0
      this.tagList.forEach((item, index) => {
        if(item.id == e.id) {
          xx = index
        }
      })
      this.certObj.tagName = this.tagList[xx].name
    },
    pictureChange(e) {
      this.pictrueChooseList = []
      this.pictrueList.forEach((item) => {
        e.forEach((ite) => {
          if(ite == item.resource_id) {
            this.pictrueChooseList.push(item)
          }
        })
      })
    },
    testChange(e) {
      this.testChoosedList = []
      this.testList.forEach((item) => {
        e.forEach((ite) => {
          if(ite == item.resource_id) {
            this.testChoosedList.push(item)
          }
        })
      })
    },
    // testProChange(e) {
    //   this.testProChoosedList = []
    //   this.testProList.forEach((item) => {
    //     e.forEach((ite) => {
    //       if(ite == item.id) {
    //         this.testProChoosedList.push(item)
    //       }
    //     })
    //   })
    // },
    zhuanlanChange(e) {
      this.zhuanlanChoosedList = []
      this.zhuanLanList.forEach((item) => {
        e.forEach((ite) => {
          if(ite == item.resource_id) {
            this.zhuanlanChoosedList.push(item)
          }
        })
      })
    },
    onlineChangeMore(e) {
      this.onlineChoosedList = []
      this.onlineList.forEach((item) => {
        e.forEach((ite) => {
          if(ite == item.resource_id) {
            this.onlineChoosedList.push(item)
          }
        })
      })
    },
    videoChange(e) {
      this.videoChoosedList = []
      this.videoList.forEach((item) => {
        e.forEach((ite) => {
          if(ite == item.resource_id) {
            this.videoChoosedList.push(item)
          }
        })
      })
    },
    viewImage(obj) {
      this.imgModal = true;
      this.imgSrc = obj.url;
    },
    saveApplyResult() {
      if (this.applyResult == 2) {
        if (this.applyResultReject) {
          applyResultApi({
            id: this.applyResultId,
            applyState: this.applyResult,
            reason: this.applyResultReject
          }).then(res => {
            this.$message({
              message: "操作成功！",
              type: "success"
            });
            this.applyResultModal = false;
            this.applyObj.pageNum = 1;
            this.getApplyList();
          });
        } else {
          this.$message({
            message: "请输入拒绝理由！",
            type: "error"
          });
        }
      } else {
        applyResultApi({
          id: this.applyResultId,
          applyState: this.applyResult,
          reason: this.applyResultReject
        }).then(res => {
          this.$message({
            message: "操作成功！",
            type: "success"
          });
          this.applyResultModal = false;
          this.applyObj.pageNum = 1;
          this.getApplyList();
        });
      }
    },
    openApplyResult(row) {
      this.applyResultId = row.id;
      this.applyResult = "1";
      this.applyResultModal = true;
      this.applyResultReject = "";
    },
    openCertLogsit(type, obj) {
      this.certLogisticsType = type
      this.certLogisticsCertificateId = obj.id
      this.certLogisticsSearchObj.pageNum = 1
      if (type == 0) {
        this.certLogisticsTitle = '电子证书申请列表'
      } else {
        this.certLogisticsTitle = '纸质证书申请列表'
      }
      this.getCertLogisticsList()
      this.certLogisticsModal = true
    },
    getCertLogisticsList() {
      this.certLogisticsLoading = false
      getCertLogisticsListApi({
        certificateId: this.certLogisticsCertificateId,
        type: this.certLogisticsType,
        mobile: this.certLogisticsSearchObj.mobile,
        logisticsState: this.certLogisticsSearchObj.logisticsState,
        payState: this.certLogisticsSearchObj.payState,
        pageSize: this.certLogisticsSearchObj.pageSize,
        pageNum: this.certLogisticsSearchObj.pageNum
      }).then(res => {
        this.certLogisticsLoading = false
        this.certLogisticsList = res.data.result
        this.certLogisticsSearchObj.total = res.data.total
      });
    },
    handleSizeSupplyChange(val) {
      this.certLogisticsSearchObj.pageSize = val
      this.getCertLogisticsList()
    },
    handleCurrentSupplyChange(val) {
      this.certLogisticsSearchObj.pageNum = val
      this.getCertLogisticsList()
    },
    resetCertLogisticsList() {
      this.certLogisticsSearchObj.type = ''
      this.certLogisticsSearchObj.payState = ''
      this.certLogisticsSearchObj.logisticsState = ''
      this.certLogisticsSearchObj.pageSize = 10
      this.certLogisticsSearchObj.pageNum = 1
      this.getCertLogisticsList()
    },
    handleSelectionChange(e, row) {
      console.log(e);
      if (this.selectPersonList.indexOf(String(row.id)) > -1) {
        this.selectPersonList = this.selectPersonList.filter(item => {
          return item != row.id;
        });
      } else {
        this.selectPersonList.push(String(row.id));
      }
    },
    selectAll(e) {
      console.log(e);
      if (e.length) {
        e.forEach(item => {
          this.selectPersonList.push(String(item.id));
        });
        this.selectPersonList = [...new Set(this.selectPersonList)];
      } else {
        let tableArray = this.certPersonList.map(item => String(item.id));
        this.selectPersonList = this.selectPersonList.filter(items => {
          if (!tableArray.includes(items)) {
            return items;
          }
        });
      }
    },
    openApply(row) {
      this.applySearchId = row.id
      this.applyModal = true
      this.getApplyList()
    },
    resetApply() {
      this.applyObj.pageSize = 10
      this.applyObj.pageNum = 1
      this.applyObj.applyState = ''
      this.applyObj.mobile = ''
      this.getApplyList()
    },
    getApplyList() {
      this.applyLoading = true
      getApplyListApi({
        certificateId: this.applySearchId,
        pageSize: this.applyObj.pageSize,
        pageNum: this.applyObj.pageNum,
        applyState: this.applyObj.applyState,
        mobile: this.applyObj.mobile
      }).then(res => {
        this.applyLoading = false
        this.applyList = res.data.result
        this.applyObj.total = res.data.total
      })
    },
    handleSizeApplyChange(val) {
      this.applyObj.pageSize = val
      this.getApplyList()
    },
    handleCurrentApplyChange(val) {
      this.applyObj.pageNum = val
      this.getApplyList()
    },

    openCertPerson(row) {
      this.certPersonObj.pageNum = 1
      this.certPersonObj.pageSize = 10
      this.certPersonModal = true;
      this.certPersonObjXXX = row;
      this.getCertPersonList();
    },
    resetCertPersonList() {
      this.certSearchObj.realName = ''
      this.certSearchObj.mobile = ''
      this.certPersonObj.pageNum = 1
      this.certPersonObj.pageSize = 10
      this.getCertPersonList()
    },
    getCertPersonList() {
      this.certPersonLoading = true
      getUserListApi({
        realName: this.certSearchObj.realName,
        mobile: this.certSearchObj.mobile,
        pageNum: this.certPersonObj.pageNum,
        pageSize: this.certPersonObj.pageSize,
        certificateId: this.certPersonObjXXX.id,
        state: 1
      }).then(res => {
        this.certPersonLoading = false
        this.certPersonList = res.data.result
        this.certPersonObj.total = res.data.total
        this.getPersonCertList()
      })
    },
    savePersonCert() {
      console.log(this.selectPersonList);
      saveCertPersonApi({
        userIds: this.selectPersonList,
        certificateId: this.certPersonObjXXX.id
      }).then(res => {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.certPersonModal = false
        this.pageObj.pageNum = 1
        this.fetchData()
      })
    },
    getPersonCertList() {
      getCertPersonListApi(this.certPersonObjXXX.id).then(res => {
        this.selectPersonList = res.data
        let that = this
        this.$nextTick(() => {
          for (let i = 0; i < that.certPersonList.length; i++) {
            for (let j = 0; j < that.selectPersonList.length; j++) {
              if (that.certPersonList[i].id == that.selectPersonList[j]) {
                that.$refs.multipleTablePerson.toggleRowSelection(
                  that.certPersonList[i],
                  true
                );
              }
            }
          }
        });
      });
    },
    handleSizeCertChange(val) {
      this.certPersonObj.pageSize = val
      this.getCertPersonList()
    },
    handleCurrentCertChange(val) {
      this.certPersonObj.pageNum = val
      this.getCertPersonList()
    },

    offlineChange(e) {
      this.certObj.offlineRefPaperCode = e
    },
    onlineChange(e) {
      this.certObj.onlineRefPaperCode = e
    },
    createCert() {
      if(!this.imgFilesList.length) {
        this.$message.error('上传模版！')
        return
      }
      if(this.certObj.haveCase == 1 && !this.caseFileList.length) {
        this.$message.error('上传案例！')
        return
      }
      if(!this.certObj.tagId) {
        this.$message.error('选择标签！')
        return
      }
      createCertApi({
        tagId: this.certObj.tagId,
        tagName: this.certObj.tagName,
        type: this.activeCertClassifyId,
        name: this.certObj.name,
        level: this.certObj.level,
        expireYear: this.certObj.expireYear,
        fee: this.certObj.activateFee,
        offlineExamType: this.certObj.offlineExamType,
        caseUploadUrl: this.certObj.caseUploadUrl,
        offlineH5Url: this.certObj.offlineH5Url,
        offlineWechatPic: this.certObj.offlineWechatPic,
        onlineExamType: this.certObj.onlineExamType,
        onlineH5Url: this.certObj.onlineH5Url,
        onlineWechatPic: this.certObj.onlineWechatPic,
        state: this.certObj.state,
        scoreRate: this.certObj.scoreRate,
        certTemplate: this.imgFilesList[0].url,
        activateFee: this.certObj.activateFee,
        makeFee: this.certObj.makeFee,
        onlinePassScore: this.certObj.onlinePassScore,
        onlineRefPaperCode: this.certObj.onlineRefPaperCode,
        offlinePassScore: this.certObj.offlinePassScore,
        offlineRefPaperCode: this.certObj.offlineRefPaperCode,
        grantType: this.certObj.grantType,
        haveCase: this.certObj.haveCase,
        intro: this.certObj.intro,
        caseUrl: this.caseFileList.length?this.caseFileList[0].url:'',
        resType3: this.videoChoosedList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 3,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        }),
        resType1: this.pictrueChooseList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 1,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        }),
        resType6: this.zhuanlanChoosedList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 6,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        }),
        resType25: this.testChoosedList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 25,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        }),
        // resType50: this.testProChoosedList.map((item) => {
        //   return {
        //     id: item.id,
        //     name: item.goods_name,
        //     type: 50,
        //     path: item.resource_id
        //   }
        // }),
        resType4: this.onlineChoosedList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 4,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        })
      }).then((res) => {
        this.$message.success('操作成功！')
        this.fetchData()
        this.closeCert()
      })
    },
    updateCert() {
      if(!this.imgFilesList.length) {
        this.$message.error('上传模版！')
        return
      }
      if(this.certObj.haveCase == 1 && !this.caseFileList.length) {
        this.$message.error('上传案例！')
        return
      }
      if(!this.certObj.tagId) {
        this.$message.error('选择标签！')
        return
      }
      updateCertApi({
        tagId: this.certObj.tagId,
        tagName: this.certObj.tagName,
        id: this.certObj.id,
        type: this.activeCertClassifyId,
        name: this.certObj.name,
        level: this.certObj.level,
        expireYear: this.certObj.expireYear,
        fee: this.certObj.activateFee,
        offlineExamType: this.certObj.offlineExamType,
        offlineH5Url: this.certObj.offlineH5Url,
        offlineWechatPic: this.certObj.offlineWechatPic,
        onlineExamType: this.certObj.onlineExamType,
        onlineH5Url: this.certObj.onlineH5Url,
        onlineWechatPic: this.certObj.onlineWechatPic,
        state: this.certObj.state,
        caseUploadUrl: this.certObj.caseUploadUrl,
        scoreRate: this.certObj.scoreRate,
        certTemplate: this.imgFilesList[0].url,
        activateFee: this.certObj.activateFee,
        makeFee: this.certObj.makeFee,
        onlinePassScore: this.certObj.onlinePassScore,
        onlineRefPaperCode: this.certObj.onlineRefPaperCode,
        offlinePassScore: this.certObj.offlinePassScore,
        offlineRefPaperCode: this.certObj.offlineRefPaperCode,
        grantType: this.certObj.grantType,
        haveCase: this.certObj.haveCase,
        intro: this.certObj.intro,
        caseUrl: this.caseFileList.length?this.caseFileList[0].url:'',
        resType3: this.videoChoosedList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 3,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        }),
        resType1: this.pictrueChooseList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 1,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        }),
        resType6: this.zhuanlanChoosedList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 6,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        }),
        resType25: this.testChoosedList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 25,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        }),
        // resType50: this.testProChoosedList.map((item) => {
        //   return {
        //     id: item.id,
        //     name: item.goods_name,
        //     type: 50,
        //     path: item.resource_id
        //   }
        // }),
        resType4: this.onlineChoosedList.map((item) => {
          return {
            id: item.resource_id,
            name: item.goods_name,
            type: 4,
            path: item.resource_id,
            goods_img: item.goods_img
          }
        })
      }).then((res) => {
        this.$message.success('操作成功！')
        this.fetchData()
        this.closeCert()
      })
    },
    closeCert() {
      this.drawerVisible = false
      this.certObj.id = ''
      this.certObj.tagId = ''
      this.certObj.tagName = ''
      this.certObj.name = ''
      this.certObj.level = ''
      this.certObj.expireYear = 1
      this.certObj.fee = 0
      this.certObj.state = 1
      this.certObj.scoreRate = 0
      this.imgFilesList = []
      this.caseFileList = []
      this.certObj.activateFee = 0
      this.certObj.caseUploadUrl = ''
      this.certObj.onlinePassScore = 0
      this.certObj.onlineRefPaperCode = ''
      this.certObj.offlinePassScore = 0
      this.certObj.offlineRefPaperCode = ''
      this.certObj.offlineExamType = 0
      this.certObj.offlineH5Url = ''
      this.certObj.offlineWechatPic = ''
      this.certObj.onlineExamType = 0
      this.certObj.onlineH5Url = ''
      this.certObj.onlineWechatPic = ''
      this.certObj.grantType = 1
      this.certObj.haveCase = 0
      this.certObj.makeFee = 0
      this.certObj.intro = ''
      this.certObj.video = []
      this.certObj.picture = []
      this.certObj.zhuanlan = []
      this.certObj.online = []
      this.certObj.test = []
      this.certObj.testPro = []

      this.videoList = []
      this.videoChoosedList = []
      this.onlineList = []
      this.onlineChoosedList = []
      this.testProList = []
      this.testProChoosedList = []
      this.testList = []
      this.testChoosedList = []
      this.zhuanLanList = []
      this.zhuanlanChoosedList = []
      this.pictrueList = []
      this.pictrueChooseList = []

      this.onlineChecked = false
      this.outlineChecked = false
    },
    getVideoList() {
      this.loading1 = true
      getThreeGoodsListApi({
        resourceType: 3
      }).then((res) => {
        this.loading1 = false
        this.videoList = res.data
      })
    },
    getPictureList() {
      this.loading2 = true
      getThreeGoodsListApi({
        resourceType: 1
      }).then((res) => {
        this.loading2 = false
        this.pictrueList = res.data
      })
    },
    getZhuanlanList() {
      this.loading3 = true
      getThreeGoodsListApi({
        resourceType: 6
      }).then((res) => {
        this.loading3 = false
        this.zhuanLanList = res.data
      })
    },
    getTestList() {
      this.loading4 = true
      getThreeGoodsListApi({
        resourceType: 25
      }).then((res) => {
        this.loading4 = false
        this.testList = res.data
      })
    },
    // getTestProList() {
    //   this.loading5 = true
    //   getThreeGoodsListApi({
    //     resourceType: 50
    //   }).then((res) => {
    //     this.testProList = res.data
    //   })
    // },
    getOnlineList() {
      this.loading5 = true
      getThreeGoodsListApi({
        resourceType: 4
      }).then((res) => {
        this.loading5 = false
        this.onlineList = res.data
      })
    },
    add() {
      this.queryAllTagList()
      this.getVideoList()
      this.getPictureList()
      this.getZhuanlanList()
      this.getTestList()
      // this.getTestProList()
      this.getOnlineList()
      this.drawerVisible = true
      // this.$router.push({
      //   path: "/news/add",
      // });
    },
    edit(row) {
      this.queryAllTagList()

      this.loading1 = true
      this.loading2 = true
      this.loading3 = true
      this.loading4 = true
      this.loading5 = true

      getThreeGoodsListApi({
        resourceType: 1
      }).then((res) => {
        this.loading5 = false
        this.pictrueList = res.data
        this.certObj.picture = JSON.parse(row.resType1).map((item) => {
          return item.id
        })
        JSON.parse(row.resType1).forEach((item) => {
          this.pictrueList.forEach((ite) => {
            if(item.id == ite.resource_id) {
              this.pictrueChooseList.push(ite)
            }
          })
        })
      })

      console.log(this.pictrueChooseList)


      getThreeGoodsListApi({
        resourceType: 3
      }).then((res) => {
        this.loading4 = false
        this.videoList = res.data
        this.certObj.video = JSON.parse(row.resType3).map((item) => {
          return item.id
        })
        JSON.parse(row.resType3).forEach((item) => {
          this.videoList.forEach((ite) => {
            if(item.id == ite.resource_id) {
              this.videoChoosedList.push(ite)
            }
          })
        })
      })

      getThreeGoodsListApi({
        resourceType: 6
      }).then((res) => {
        this.loading3 = false
        this.zhuanLanList = res.data
        this.certObj.zhuanlan = JSON.parse(row.resType6).map((item) => {
          return item.id
        })
        JSON.parse(row.resType6).forEach((item) => {
          this.zhuanLanList.forEach((ite) => {
            if(item.id == ite.resource_id) {
              this.zhuanlanChoosedList.push(ite)
            }
          })
        })
      })

      getThreeGoodsListApi({
        resourceType: 25
      }).then((res) => {
        this.loading2 = false
        this.testList = res.data
        this.certObj.test = JSON.parse(row.resType25).map((item) => {
          return item.id
        })
        JSON.parse(row.resType25).forEach((item) => {
          this.testList.forEach((ite) => {
            if(item.id == ite.resource_id) {
              this.testChoosedList.push(ite)
            }
          })
        })
      })

      getThreeGoodsListApi({
        resourceType: 4
      }).then((res) => {
        this.loading1 = false
        this.onlineList = res.data
        this.certObj.online = JSON.parse(row.resType4).map((item) => {
          return item.id
        })
        JSON.parse(row.resType4).forEach((item) => {
          this.onlineList.forEach((ite) => {
            if(item.id == ite.resource_id) {
              this.onlineChoosedList.push(ite)
            }
          })
        })
      })

      // this.getVideoList()
      // this.getPictureList()
      // this.getZhuanlanList()
      // this.getTestList()
      // this.getTestProList()
      // this.getOnlineList()
      this.drawerVisible = true
      this.certObj.id = row.id
      this.certObj.tagId = Number(row.tagId)
      this.certObj.tagName = row.tagName
      this.certObj.name = row.name
      this.certObj.caseUploadUrl = row.caseUploadUrl
      this.certObj.level = row.level
      this.certObj.expireYear = row.expireYear
      this.certObj.fee = row.fee
      this.certObj.offlineExamType = row.offlineExamType
      this.certObj.offlineH5Url = row.offlineH5Url
      this.certObj.offlineWechatPic = row.offlineWechatPic
      this.certObj.onlineExamType = row.onlineExamType
      this.certObj.onlineH5Url = row.onlineH5Url
      this.certObj.onlineWechatPic = row.onlineWechatPic
      this.certObj.state = 1
      this.certObj.scoreRate = row.scoreRate
      this.certObj.activateFee = row.activateFee
      this.certObj.onlinePassScore = row.onlinePassScore
      this.certObj.onlineRefPaperCode = String(row.onlineRefPaperCode)
      this.certObj.offlinePassScore = row.offlinePassScore
      this.certObj.offlineRefPaperCode = String(row.offlineRefPaperCode)
      this.certObj.grantType = row.grantType
      this.certObj.haveCase = row.haveCase
      this.certObj.makeFee = row.makeFee
      this.certObj.intro = row.intro
      this.onlineChecked = row.onlinePassScore?true:false
      this.outlineChecked = row.offlineRefPaperCode?true:false
      this.caseFileList = [
        {
          url: row.caseUrl,
          id: 1,
          name: row.caseUrl
        }
      ]
      this.imgFilesList = [
        {
          url: row.certTemplate,
          id: 1
        }
      ]
      this.wechatFileList = [
        {
          url: row.offlineWechatPic,
          id: 1,
          name: row.offlineWechatPic
        }
      ]
      this.wechatOnlineFileList = [
        {
          url: row.onlineWechatPic,
          id: 1,
          name: row.onlineWechatPic
        }
      ]

      // getThreeGoodsListApi({
      //   resourceType: 50
      // }).then((res) => {
      //   this.testProList = res.data
      //   this.certObj.testPro = JSON.parse(row.resType50).map((item) => {
      //     return Number(item.id)
      //   })
      //   JSON.parse(row.resType50).forEach((item) => {
      //     this.testProList.forEach((ite) => {
      //       if(item.id == ite.id) {
      //         this.testProChoosedList.push(ite)
      //       }
      //     })
      //   })
      // })


    },
    queryAllTagList() {
      queryAllTagListApi().then((res) => {
        this.tagList = res.data
      })
    },
    handleCaseSuccess(e) {
      if(e.code == 200) {
        this.caseFileList = [
          {
            url: e.data.url,
            id: e.data.id,
            name: e.data.url
          }
        ]
      } else {
        this.$message.error('上传失败！')
        this.caseFileList = []
      }
    },
    beforeUploadCase(e) {
      // console.log(e)
      this.caseFileName = e.name
    },
    handleRemoveCase() {
      this.caseFileList = []
      // console.log(this.caseFileList)
    },

    handleOnlineWechatSuccess(e) {
      if(e.code == 200) {
        this.wechatOnlineFileList = [
          {
            url: e.data.url,
            id: e.data.id,
            name: e.data.url
          }
        ]
      } else {
        this.$message.error('上传失败！')
        this.wechatOnlineFileList = []
      }
    },
    beforeUploadOnlineWechat(e) {
      // console.log(e)
      this.wechatOnlineFileName = e.name
    },
    handleRemoveOnlineWechat() {
      this.wechatOnlineFileList = []
      // console.log(this.caseFileList)
    },

    handleWechatSuccess(e) {
      if(e.code == 200) {
        this.wechatFileList = [
          {
            url: e.data.url,
            id: e.data.id,
            name: e.data.url
          }
        ]
      } else {
        this.$message.error('上传失败！')
        this.wechatFileList = []
      }
    },
    beforeUploadWechat(e) {
      // console.log(e)
      this.wechatFileName = e.name
    },
    handleRemoveWechat() {
      this.wechatFileList = []
      // console.log(this.caseFileList)
    },

    haveCaseChange(e) {
      if (e == 1) {
        this.certObj.grantType = 2
      }
    },
    getExam() {
      getThreeExamListApi().then((res) => {
        this.examList = res.data
      })
    },
    handleClick(e, k) {
      // let typeId = e.name.slice(1, e.name.length - 1)
      this.activeCertClassifyId = e.name
      this.fetchData()
    },
    getCertCategoryList() {
      getCertCategoryListApi({
        pageNum: 1,
        pageSize: 100
      }).then((res) => {
        if (res.data.list.length) {
          this.categoryList = res.data.list
          this.activeName = `'${res.data.list[0].id}'`
          this.activeCertClassifyObj = res.data.list[0]
          this.activeCertClassifyId = res.data.list[0].type
          this.fetchData()
        }
      })
    },
    handleSuccess(e) {
      if(e.code == 200) {
        this.imgFilesList = [
          {
            url: e.data.url,
            id: e.data.id
          }
        ]
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove() {
      this.imgFilesList = []
    },
    handleClose() {
      this.drawerVisible = false
      this.closeCert()
    },
    onSubmit() {
      this.fetchData();
    },
    closeDialog() {
      this.drawerVisible = false
    },
    changeTop(id, isShow) {
      changeTopApi({
        id: id,
        isShow: isShow,
      }).then((res) => {
        this.fetchData();
      });
    },
    changeState(row, state) {
      changeStateApi({
        id: row.id,
        state: state,
      }).then((res) => {
        this.fetchData();
      });
    },
    getTypeList() {
      gettypeListApi({
        pageSize: 100,
        pageNum: 1,
      }).then((res) => {
        this.typeList = res.data.result.map((r) => {
          return {
            value: r.id,
            label: r.name,
          };
        });
      });
    },
    del(row) {
      deleteCertApi({
        id: row.id
      }).then((res) => {
        this.fetchData()
      })
    },
    resetSubmit() {
      this.formInline.name = ''
      this.pageObj.pageSize = 10
      this.pageObj.pageNum = 1
      this.pageObj.total = 0
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getCertListApi({
        name: this.formInline.name,
        certseriesTypeCode: this.activeCertClassifyId,
        pageSize: this.pageObj.pageSize,
        pageNum: this.pageObj.pageNum
      }).then((response) => {
        this.list = response.data.list
        this.pageObj.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageObj.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageObj.pageNum = val
      this.fetchData()
    }
  }
}
</script>

<style>
  .el-drawer__body{
    overflow-x: hidden;
    overflow-y: auto;
  }
  .hiddenUpload .el-upload--picture-card{
    display:none !important;
  }
</style>

<style lang="scss" scoped>
.news-list {
  padding: 20px;
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
